
<template>
  <div>
    <!--表格上部标签-->
    <div class="tableHeader">
      <span>列表组合</span>
      <!--</el-button>-->
    </div>
    <el-header  style="background-color: #fff;height: 70px;width:  97.4%;margin-left: 20px;margin-top: -15px">
    <el-input placeholder="请输入内容" v-model="search.value" class="input-with-select" span="12" clearable @clear="refreshData">
      <el-select v-model="search.method" slot="prepend" placeholder="请选择" :value="search.method">
        <el-option label="ID" value="ID"></el-option>
        <el-option label="组合名字" value="组合名字"></el-option>
        <el-option label="组合价格" value="组合价格"></el-option>
      </el-select>
      <el-button slot="append" icon="el-icon-search" @click="dataFilter"></el-button>
    </el-input>
  </el-header>
  <el-main>
    <!--这是table的组件模块-->
    <i-table :list="list"
             @handleSelectionChange="handleSelectionChange"
             :options="options"
             :columns="columns"
             :operates="operates">
    </i-table>
  </el-main>
    <!--//筛选-->

    <!--//编辑-->
    <el-dialog title="修改组合" :visible.sync="dialogFormVisible">
      <el-form :model="form" v-on:submit="editCustomer" >
        <el-form-item label="组合ID" :label-width="formLabelWidth" >
          <el-input v-model="form.package_id" autocomplete="off"  ></el-input>
        </el-form-item>
        <el-form-item label="商品名" :label-width="formLabelWidth" >
          <el-input v-model="form.package_name" autocomplete="off"  ></el-input>
        </el-form-item>
        <el-form-item label="组合价格" :label-width="formLabelWidth" >
          <el-input v-model="form.package_price" autocomplete="off"  ></el-input>
        </el-form-item>
        <el-form-item label="创建时间" :label-width="formLabelWidth" >
          <el-input v-model="form.create_date" autocomplete="off" ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="submit"  @click="editCustomer">确 定</el-button>
      </div>
    </el-dialog>


  </div>
</template>
<script>
  import iTable from './combination_table'//引入table组件

  export default {
    name: 'combinationList_one',
    components: {
      iTable
    },
    //表格数据的操作方法
    data() {
      return {
        editForm: {
          package_name: null,
          package_id: null,
          package_price: null
        },
        search: {
          method: 'ID',
          value: null
        },

        //编辑按钮弹出框
        dialogTableVisible: false,
        dialogFormVisible: false,
        form: {
          package_id:"form.package_id",
          package_price:"form.package_price",
          create_date:"that.editData.package_name",
          package_name: 'that.editData.package_name',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        formLabelWidth: '120px',
        // table数据传入
        list: [

        ],

        // table 的参数
        options: {
          stripe: true, // 是否为斑马纹 table
          loading: false, // 是否添加表格loading加载动画
          highlightCurrentRow: true, // 是否支持当前行高亮显示
          mutiSelect: true, // 是否支持列表项选中功能
        },

        //table表头的添加与修改，需要展示的列
        columns: [
        {
          prop: 'package_id',
          label: 'id',
          align: 'center',
        },
        {
          prop: 'package_name',
          label: '商品名',
          align: 'center',
        },
        {
          prop: 'package_price',
          label: '组合价格',
          align: 'center',
        },
        {
          prop: 'create_date',
          label: '创建时间',
          align: 'center',
        },
        ],
        // 列操作按钮
        operates: {
          width: 200,
          fixed: 'right',
          list: [
            //编辑按钮
            {
              id: '1',//按钮id
              label: '编辑',//按钮内容
              type: 'warning',//按钮样式
              show: true,//是否展示
              icon: 'el-icon-edit',//按钮内部图标
              plain: true,
              disabled: false,
              method: (index, row) => {
                this.handleEdit(index, row)
              }
            },
            //删除按钮
            {
              id: '2',
              label: '删除',
              type: 'danger',
              icon: 'el-icon-delete',
              show: true,
              plain: false,
              disabled: false,
              method: (index, row) => {
                this.handleDel(index, row)
              }
            }
          ]
        }
      }
    },

    methods: {
      // 选中行
      handleSelectionChange(val) {
        console.log('val:', val)
      },
      // 编辑
      handleEdit(index, row) {
        this.dialogFormVisible = true;
        console.log(row);
        console.log(row.package_id);
        let i=row;
        let that=this;
        this.$axiosx.get('/api/back_l.ing')
          .then(function (res) {
            console.log(i.package_name);
            that.form={package_id:i.package_id,package_name:i.package_name,create_date:i.create_date,package_price:i.package_price}
            console.log(that.form.package_name);
            // console.log(res.data[i-1]);
          }).catch(function (err) {
          console.log(err)
        })
      },
      editCustomer(e) {
        console.log("jing");
        console.log(this);
        //修改
        if (!this.form.package_name||!this.form.package_price||!this.form.create_date){
          console.log("请添加")
        }else {
          let newfrom = {
            package_id: this.form.package_id,
            package_item_id: this.form.package_item_id,
            package_name: this.form.package_name,
            create_date: this.form.create_date,
            package_price: this.form.package_price
          };
          this.$axiosx.post('/api/back_edit.ing',newfrom)
            .then(function (res) {
              console.log(res);
              console.log("成功");
            }).catch(function (err) {
            console.log(err)
          })
        }
        console.log(this);
          this.dialogFormVisible = false;
        console.log(this);
        const that = this;
        this.$axiosx.get('/api/back_login.ing').then(function (response) {
          console.log(response.data);
          that.list = response.data;

        }).catch(function (err) {
          console.log(err)
        })
        e.preventDefault()
      },
      // 删除
      handleDel(index, row) {
        let package_id = row.package_id;
        let package_isdel = 0;
        console.log(this);
        let that = this;
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
              type: 'success',
              message: '删除成功!',
            },
            this.$axiosx({
              method: "post",
              url: "/api/back_del.ing",
              data: {
                package_id: package_id,
                package_isdel: package_isdel,
              }
            }),
            this.$axiosx.get('/api/back_login.ing').then(function (response) {
              console.log(response.data);
              that.list = response.data;
            }).catch(function (err) {
              console.log(err)
            })
          );
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      dataFilter () {
        switch (this.search.method) {
          case 'ID':
            this.list.forEach((val, index, arr) => {
              if (val.package_id === parseFloat(this.search.value)) {
                this.list = [val]
              }
            })
            break
          case '组合名字':
            let showData = []
            this.list.forEach((val, index, arr) => {
              if (val.package_name.indexOf(this.search.value) >= 0) {
                showData.push(val)
              }
            })
            this.list = showData
            break
          case '组合价格':
            let showData2 = []
            this.list.forEach((val, index, arr) => {
              if (val.package_price.indexOf(this.search.value) >= 0) {
                showData2.push(val)
              }
            })
            this.list = showData2
            break
        }
      },
      refreshData () {
        this.$axiosx.get('/api/back_login.ing?package_item_id=${row.package_item_id}')
          .then((response) => {
            this.list = response.data
          })
          .catch((error) => {
            console.log(error.message)
          })
      },
    },
    created() {
      this.refreshData ()
      console.log(this);
      const that = this;
      this.$axiosx.get('/api/back_login.ing').then(function (response) {
        console.log(response.data);
        that.list = response.data;

      }).catch(function (err) {
        console.log(err)
      })
    }
  }
</script>

<style scoped lang="less">
  .tableHeader {
    margin-left: 20px;
    width: 96.4%;
    color: white;
    background-color: #00838f;
    height: 40px;
    margin-bottom: 10px;
    font-weight: 700;
    font-size: 14px;
  }
  .tableHeader span {
    display: inline-block;
    height: 40px;
    line-height: 40px;
    margin-left: 20px;
  }
  .tableHeader button {
     color: white;
     float: right;
     margin-right: 20px;
   }
  .el-select{
    width: 110px;
  }
  .input-with-select.el-input.el-input-group.el-input-group--append.el-input-group--prepend {
    width: 350px;
    height: 40px;
    border-radius: 30px;
    margin-left: -18px;
    margin-top: 15px;
  }

</style>
